<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 
        <style type="text/css"> 

            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 
    </h:head> 

    <h:body>                 
        <ez:OutletManagerIOTRHeaderMenu/>
        <ez:OutletManagerIOTRTitle/>
        <ez:OutletManagerIOTRMenu/> 

        <p:layout style="table-layout:auto; height:600px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:OutletManagerIOTRDMMenu/>
            </p:layoutUnit>

            <p:layoutUnit position="center" header="Settings" scrollable="true">
                <h:form>
                    <p:dataTable id="itemList" var="item" value="#{foodItemManagedBean.getFoodItem()}" 
                                 emptyMessage="Currently no food items have been added"
                                 dynamic ="true" paginatorPosition="top"
                                 paginator="true" rows="6"
                                 rowEditListener="#{foodItemManagedBean.onRowEdit}">
                        <f:facet name="header">
                            Existing food items
                        </f:facet>
                        <p:column style="width:16px">  
                            <p:rowToggler />  
                        </p:column> 
                        <p:column headerText="ID">
                            <h:outputText id="itemID" value="#{item.id}" />
                        </p:column>
                        <p:column headerText="Name">
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText id="itemName" value="#{item.name}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText style="width:90%" value="#{item.name}"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Type" filterBy="#{item.type}">
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText id="itemType" value="#{item.type}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:selectOneMenu value="#{foodItemManagedBean.itemType}" >
                                        <f:selectItems value="#{foodItemManagedBean.availableFoodTypes}"/>
                                    </h:selectOneMenu>
                                </f:facet>
                            </p:cellEditor>
                            
                           
                        </p:column>
                               <p:column headerText="Image">
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <p:graphicImage value =" #{item.pathName}" width="100" height="100"/>
                                </f:facet>
                                <f:facet name="input">
                                     <p:graphicImage value =" #{item.pathName}" width="100" height="100"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Price">
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText id="itemPrice" value="#{item.price}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText style="width:90%" value="#{item.price}"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Edit" style="width:5px">
                            <p:rowEditor />
                        </p:column>
                        <p:column headerText="Delete" style="width:8px">
                            <p:commandButton id="removeItem" image="ui-icon ui-icon-trash" ajax="false"
                                             update="display" actionListener="#{foodItemManagedBean.deleteFoodItem}">
                                <f:attribute name="itemId" value="#{item.id}" /> 
                            </p:commandButton>
                        </p:column>
                        <p:rowExpansion>  
                            <p:panel>
                                <h:outputText value="#{item.description}" style="width: 400px"/>
                            </p:panel>

                            <br/>
                        </p:rowExpansion>
                    </p:dataTable>
                </h:form>

                <h:form>
                    <br/>
                    <br/>
                    <br/>
                    <h:outputLabel value="Add new food item: "/>
                    <h:panelGrid columns="3">
                        <h:outputLabel value="Item name: "/>
                        <p:inputText id="name" value="#{foodItemManagedBean.name}"  
                                     required="true" style="width: 250px"/>
                        <p:message for="name"/>

                        <h:outputLabel value="Price: "/>
                        <p:inputText id="price" value="#{foodItemManagedBean.cost}"  
                                     required="true" style="width: 250px"/>
                        <p:message for="name"/>

                        <h:outputLabel value="Item type: "/>
                        <h:selectOneMenu id="type" value="#{foodItemManagedBean.itemType}"  >
                            <f:selectItems value="#{foodItemManagedBean.availableFoodTypes}"/>
                        </h:selectOneMenu>
                        <p:message for="name"/>

                        <h:outputText value="Upload Dish Photo: "/>
                        <h:form enctype="multipart/form-data" prependId="false">
                            <p:growl id="growl2" showDetail="true" life="2000"></p:growl> 
                            <p:fileUpload fileUploadListener="#{photoManagedBean.handleDishPhotoUpload}" multiple="false" label="Select Files" allowTypes="*.jpg;*.png;*.gif;" description="Images" update="growl2,gallery"/>	
                        </h:form> 
                        <br/>                      

                        <h:outputLabel value="Item description: "/>
                        <p:inputTextarea id="description" value="#{foodItemManagedBean.description}"  
                                         required="true" style="width: 400px; height:200px"/>
                        <p:message for="name"/>
                        <p:commandButton id="submitNewFoodItem" value="Submit" ajax="false" update="display"
                                         actionListener="#{foodItemManagedBean.addNewFoodItem}" />
                    </h:panelGrid>
                    <h:outputText style="font-weight: bold" value="Status Message: "/>
                    <h:outputText value="#{areaMgmtBean.statusMsg}"/>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body> 
</html>